<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <!-- 引入 echarts.js -->
    <script type="text/javascript" src="../js/echarts.min.js"></script>
    <script type="text/javascript" src="../js/jquery.js"></script>
</head>
<body>
<!-- 为ECharts准备具备大小（宽高）的几个Dom -->
<div id="histogram" style="width: 600px;height:400px;">1</div>
<div id="pie chart" style="width: 600px;height:400px;">2</div>
<!--<div id="line chart" style="width: 600px;height:400px;"></div>-->
<div id="Funnel chart" style="width: 600px;height:400px;">3</div>
<script type="text/javascript">
    $(function(){
        $.ajax({
            type: "get", //向后台发送请求的方式
            url: "findEachClassesCoreTaskCompleteRateAndSubmitRate", //向后台请求的url地址
            dataType: "json", //服务器返回的数据类型
            success: function (data) {
                //异步交互成功的回调函数，data就是后台返回的json数据
                console.log(111);
                console.log(data);
            }
        })
    })
    //柱状图
    $(function(){
        // 基于准备好的dom，初始化echarts实例
        let myChart2 = echarts.init(document.getElementById('histogram'));
        // 指定图表的配置项和数据
        let option = {
            title: {
                text: '本周核心作业提交率和完成率统计',
                left: "center"
            },
            tooltip: {
                trigger: 'axis' //不知道这是什么东西
            },
            legend: {//标签的显示位置
                // data: ['完成率', '提交率'],  //不知道为什么加上这里和去掉这里，为什么显示的都一样
                orient: 'vertical',
                left: 'left',
            },
            toolbox: {//不知道这里有什么用
                show: true//不知道这里有什么用
            },
            calculable: true,//不知道这里有什么用
            xAxis: [//横坐标
                {
                    type: 'category',//不知道为什么这里只能是category
                    data: ['java293', 'java294', 'java295', 'java296', 'java297', 'java298']
                }
            ],
            yAxis: [//如果没有这个，不会显示，和横坐标是配套使用的
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '提交率',
                    type: 'bar',
                    // top: 200,
                    position: "left",
                    data: [55, 20, 38, 87, 76, 68],
                    markPoint: {  //这里是显示柱状图的最大值和最小值的，自动计算的
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                },
                {//如果想实现多个柱状图的条柱就要写多个这样的语句
                    name: '完成率',
                    type: 'bar',
                    data: [79, 76, 84, 100, 60, 87],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {//实现显示平均值的写法，注意其所属范围
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart2.setOption(option);
        //发送异步请求，获取当前在训班级的平均成绩
        $.ajax({
            type:"get", //向后台发送请求的方式
            url:"findEachClassesCoreTaskCompleteRateAndSubmitRate", //向后台请求的url地址
            dataType:"json", //服务器返回的数据类型
            success:function(data){
                //异步交互成功的回调函数，data就是后台返回的json数据
                console.log(111);
                console.log(data);
   /*             //声明数组
                let arr1 = [];
                let arr2 = [];
                let arr3 = [];
                //循环遍历服务器返回的数组对象
                for(let i = 0; i < data.length; i++){
                    //获取每一个数组元素
                    let obj = data[i];
                    //获取obj对象的属性值
                    arr1[i] = obj.finish_rate;
                    arr2[i] = obj.submit_rate;
                    arr3[i] = obj.f_classname;
                }
                //console.log(arr);
                myChart2.setOption({
                    xAxis:[{
                        data:arr3
                    }],
                    series: [
                        {data: arr1},
                        {data: arr2
                        }]
                });*/
            }/*,
            error:function(){
                alert("异步交互失败~");
            }*/
        });
    })
    //饼状图
    $(function(){
        let myChart3 = echarts.init(document.getElementById('pie chart'));
        let option = {
            title: {
                text: '本周各班级平均成绩'
            },
            tooltip: {
                trigger: 'item'
            },
            /* legend: {//标签的位置显示
            orient: 'vertical',
            // left: 'left',
        // },*/  //不写标签就没有标签
            series: [//这个好像是显示图的标签，没有这个就没有图柱显示
                {//扇形图里面好像不能像是别的图一样能显示多个图
                    name: '班级平均成绩', //这里的名称是扇形图的最上面的名称
                    type: 'pie',
                    radius: '50%',//pie图显示的大小
                    data: [//在这里的name是里面的名称
                        {value: 23, name: 'java297'},
                        {value: 23, name: 'java230'},
                        {value: 10, name: '大数据'},
                        {value: 25, name: 'java299'},
                        {value: 27, name: 'java289'}
                    ],
                    emphasis: { //不知道这个是干什么的，更改后不影响图表的颜色
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart3.setOption(option);
        //发送异步请求，获取当前在训班级的平均成绩
        $.ajax({
            type:"get", //向后台发送请求的方式
            url:"listClassesAvgScore", //向后台请求的url地址
            dataType:"json", //服务器返回的数据类型
            success:function(data){
                //异步交互成功的回调函数，data就是后台返回的json数据
                console.log(data);
                //声明数组
                let arr = [];
                //循环遍历服务器返回的数组对象
                for(let i = 0; i < data.length; i++){
                    //获取每一个数组元素
                    let  obj = data[i];
                    //获取obj对象的属性值
                    let classname = obj.f_classname;
                    let avg_score = obj.score_avg;
                    //声明对象
                    let target = {};
                    target.name = classname;
                    target.value = avg_score;
                    arr[i] = target;
                }
                console.log(111);
                console.log(arr);
                myChart3.setOption({
                    series: [{
                        data: arr
                    }]
                });
            }/*,
            error:function(){
                alert("异步交互失败~");
            }*/
        });
    })
    //漏斗图
    $(function(){
        // 基于准备好的dom，初始化echarts实例
        let myChart5 = echarts.init(document.getElementById('Funnel chart'));
        // 指定图表的配置项和数据
        let option = {
            title: {
                text: '学员等级',
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c}%"
            },
            /*toolbox: {
                feature: {
                    dataView: {readOnly: false},
                    restore: {},
                    saveAsImage: {}
                }
            },*/
            legend: {
                data: ["A类","B类","C类","D类","E类"]
            },

            series: [
                {
                    name:'学员等级',
                    type:'funnel',
                    left: '10%',
                    top: 60,
                    //x2: 80,
                    bottom: 60,
                    width: '80%',//改漏斗图的宽度
                    // height: {totalHeight} - y - y2,
                    min: 0,
                    max: 100,
                    minSize: '0%',
                    maxSize: '100%',
                    sort: 'descending',
                    gap: 2,
                    label: {  //这个label是把内容嵌套在图表里面
                        show: true,
                        position: 'inside'
                    },
                     labelLine: {
                         length: 10,
                         lineStyle: {
                             width: 1,
                             type: 'solid'
                         }
                     },
                    itemStyle: {
                        borderColor: '#ffffff',
                        borderWidth: 1
                    },
                    emphasis: {
                        label: {
                            fontSize: 20
                        }
                    },
                    data: [
                        {value: 100, name: 'A类'},
                        {value: 80, name: 'B类'},
                        {value: 60, name: 'C类'},
                        {value: 40, name: 'D类'},
                        {value: 20, name: 'E类'}
                    ]
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart5.setOption(option);
        //发送异步请求，获取当前在训班级的平均成绩
        $.ajax({
            type: "get",
            url: "findStudentsScoreType",
            dataType: "json",
            success: function (data) {
                // console.log(444);
                console.log(data);
                let arr = [];

                let target = {};
                let target1 = {};
                let target2 = {};
                let target3 = {};
                let target4 = {};

                target.value=data[0].classa;
                target.name='A';
                arr[0]=target;

                target1.value=data[0].classb;
                target1.name='B';
                arr[1]=target1;
                target2.value=data[0].classc;
                target2.name='C';
                arr[2]=target2;
                target3.value=data[0].classd;
                target3.name='D';
                arr[3]=target3;
                target4.value=data[0].classe;
                target4.name='E';
                arr[4]=target4;

                console.log("222")
                console.log(arr)

                //console.log(arr);
                myChart5.setOption({
                    series: [{
                        data: arr
                    }]
                });
            }/*,
            error: function () {
                alert("listStudentLevelCount异步交互失败");
            }*/
        })
    })
</script>
</body>
</html>
